<template>
	<view class="container">
		<topBar>电子签名</topBar>
		<view class="content">
			<view class="title">
				我的签名
			</view>
			<view class="sign-img">
				<image src="/static/img/temp/sign.png" mode="widthFix" class="img"></image>
			</view>
		</view>
		<view class="bottom-btns">
			<Button3 class="btn updata-btn" @click="isShowMySignaturePopup = true">修改签名</Button3>
			<Button3 class="btn" @click="isShowAuthorizedSignPopup = true">授权签名</Button3>
		</view>
		<!-- 修改签名 -->
		<MySignaturePopup v-if="isShowMySignaturePopup" @saveSignature="closeSignature" />
		<!-- 授权签名 -->
		<AuthorizedSignPopup v-if="isShowAuthorizedSignPopup" @btnClick="saveAuthorizedSign" />
		<messageTip ref="myMessage"></messageTip>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import Button3 from '@/components/button3/button3.vue';
	import MySignaturePopup from '@/components/my/signaturePopup/signaturePopup.vue';
	import AuthorizedSignPopup from '@/components/my/authorizedSignPopup/authorizedSignPopup.vue';
	// 提示窗
	const myMessage = ref()
	// 是否显示签名弹窗
	const isShowMySignaturePopup = ref(false)
	// 关闭签名弹窗
	const closeSignature = () => {
		isShowMySignaturePopup.value = false
	}
	// 是否显示授权签名弹窗
	const isShowAuthorizedSignPopup = ref(false)
	// 授权签名
	const saveAuthorizedSign = (type) => {
		if (type == 1) {
			myMessage.value.open('success', '授权签名成功')
		}
		isShowAuthorizedSignPopup.value = false
	}
</script>

<style scoped lang="scss">
	.content {
		margin: 32rpx;
		border-radius: 8rpx;
		background-color: #fff;

		.title {
			margin: 32rpx 0rpx 0rpx 24rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: $default-color;
		}

		.sign-img {
			margin: 74rpx 100rpx 36rpx;

			.img {
				width: 100%;
			}
		}
	}

	.bottom-btns {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 14rpx 32rpx 70rpx;
		display: flex;
		align-items: center;
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;

		.btn {
			flex: 1;

			&.updata-btn {
				margin-right: 20rpx;
			}
		}
	}
</style>